<template>
  <div class="choice_container">
    <p>李嘉亮</p>

    <el-card class="box-card">
      <QuestionsForm :list="list" @tableData="tableData" />
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="待审核" name="1"></el-tab-pane>
        <el-tab-pane label="已审核" name="2"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="3"></el-tab-pane>
      </el-tabs>
      <el-alert
        :title="'数据一共' + counts + '条'"
        type="info"
        show-icon
        :closable="false"
      ></el-alert>
      <QuestionsTable
        @paginationTab="list = $event"
        @loadTableData="handleClick"
        :tablesData="tablesData"
        :counts="counts"
      />
    </el-card>
  </div>
</template>

<script>
import { choice } from '@/api/hmmm/questions'
import QuestionsTable from '../components/questions/questions-table.vue'
import QuestionsForm from '../components/questions/questions-form.vue'
export default {
  name: 'QuestionsChoice',
  data () {
    return {
      activeName: '0',
      counts: 0,
      tablesData: [],
      list: {
        page: 1,
        pagesize: 5
      },
      currentForm: {}
    }
  },
  components: {
    QuestionsForm,
    QuestionsTable
  },
  created () {
    this.loadChoiceList()
  },
  methods: {
    async loadChoiceList () {
      try {
        const { data: res } = await choice({
          ...this.list,
          ...this.currentForm
        })
        this.counts = res.counts
        this.tablesData = res.items
      } catch (err) {
        console.log(err)
      }
    },
    async handleClick () {
      if (this.activeName === '0') {
        this.loadChoiceList()
      } else {
        try {
          const res = (
            await choice({
              chkState: this.activeName - 1,
              ...this.list,
              ...this.currentForm
            })
          ).data
          this.tablesData = res.items
          this.counts = res.counts
        } catch (err) {
          console.log(err)
        }
      }
    },
    tableData (val, form) {
      this.tablesData = val.items
      this.counts = val.counts
      this.currentForm = form
    }
  },
  watch: {
    list: {
      deep: true,
      handler () {
        this.handleClick()
      }
    }
  }
}
</script>

<style scoped lang="less">
.choice_container {
  padding: 10px;
  .el-alert {
    margin-bottom: 20px;
  }
}
</style>
